<template>
	<view>
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="确认订单" :autoBack="true"></u-navbar>
		</view>

		<view class="con-body wrap">
			<view class="shadow_con1 u-margin-top-20" style="padding:0 20rpx;">
				<u-form-item label="收货方式" prop="item.type" labelWidth="70">
					<u-radio-group v-model="truck_type" placement="row"
						@change="groupChange">
						<u-radio :customStyle="{marginLeft: '15rpx'}" v-for="(item, index) in typeList"
							:key="index" :label="item.label" :name="item.name" activeColor="#008987" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</u-form-item>
			</view>
			<!-- <view v-if="truck_type == 1" style="padding:30rpx 20rpx 15rpx;font-size: 32rpx;font-weight: bold;">收货地址</view> -->
			<view class="shadow_con1 u-margin-top-20" style="padding:0 20rpx 10rpx;" v-if="truck_type == 1">
				<view style="padding:30rpx 20rpx 0rpx;font-size: 32rpx;font-weight: bold;">收货地址</view>
				<u-cell :border='false'>
					<view slot="label" style="font-size: 28rpx;color:#555;line-height: 50rpx;">
						<view>联系人：{{ userInfo.name }} {{ userInfo.phone }}</view>
						<!-- <view>电话：</view> -->
						<view>地址：{{ userInfo.address }}</view>
						<view>详细地址：{{ userInfo.address_detail }}</view>
					</view>
					<view slot="value"><u-icon name="edit-pen" size="40"></u-icon></view>
				</u-cell>
			</view>
			<!-- <view style="padding:30rpx 20rpx 15rpx;font-size: 32rpx;font-weight: bold;">商品信息</view> -->
			<view class="shadow_con u-margin-top-20">
				<view class="u-border-bottom title">
					<text style="margin-right: 20rpx;">订单编号</text>
					<text>{{ detail.order_no }}</text>
				</view>
				<view>
					<view class="item" v-for="(item, index) in detail.item" :key="index">
						<view class="left"><image :src="item.goods_cover" mode="aspectFill"></image></view>
						<view class="content">
							<view class="title u-line-2">{{ item.goods_name }}聚合反应附加费几号发货</view>
							<view class="type">{{ item.goods_spec }}</view>
							<view class="delivery-time">更新时间 {{ item.update_time }}</view>
						</view>
						<view class="right">
							<view class="price">
								￥{{ priceInt(item.total_selling) }}
								<text class="decimal">.{{ priceDecimal(item.total_selling) }}</text>
							</view>
							<view class="number">x{{ item.stock_sales }}</view>
						</view>
					</view>
					<view class="total">
						共{{ detail.number_goods }}件商品 合计:
						<text class="total-price" style="color:red;">
							￥{{ detail.amount_goods }}.
							<text class="decimal">{{ priceDecimal(detail.amount_goods) }}</text>
						</text>
					</view>
				</view>
				<view>
					<view style="padding-left: 30rpx; padding-right: 30rpx; padding-bottom: 10rpx;">
						<u-form-item label="订单备注" required prop="remark" labelWidth="70" borderBottom>
					
						</u-form-item>
						<u-textarea style="margin: 20rpx 0;" v-model="order_remark" placeholder="请输入订单备注"></u-textarea>
					</view>
				</view>
				<button type="default" class="btn_con" v-if="detail.status == 2" @click="confirm">去支付</button>
			</view>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import { getOrderDetail,confirmOrder } from '@/service/shopservice.js';
import { getAddress } from '@/service/userService.js';
export default {
	data() {
		return {
			order_no: 0,
			userInfo: {
				id:0,
				address: '请选择收货地址',
				address_detail: '',
				name: '收货人',
				phone: '联系电话'
			},
			order_remark: '',
			truck_type: 0,
			detail: {},
			typeList: [{
					name: 0,
					label: '上门自提',
					disabled: false
				},
				{
					name: 1,
					label: '物业配送',
					disabled: false
				}
			]
		};
	},
	onLoad(options) {
		console.log(options);
		this.order_no = options.order_no;
		getOrderDetail({ oid: this.order_no }).then(this.getOrderDetail);
		getAddress().then(this.getAddress);
	},
	computed: {
		// 价格小数
		priceDecimal() {
			return val => {
				if (val !== parseInt(val)) return val.slice(-2);
				else return '00';
			};
		},
		// 价格整数
		priceInt() {
			return val => {
				if (val !== parseInt(val)) return val.split('.')[0];
				else return val;
			};
		}
	},
	methods: {
		getOrderDetail(e) {
			if (e.code == 200) {
				this.detail = e.result;
			} else {
				uni.showToast({
					title: e.msg,
					icon: 'none'
				});
			}
		},
		getAddress(e) {
			// console.log(e);
			if (e.code == 200) {
				this.userInfo = e.result[0];
			}
		},
		confirm(){
			confirmOrder({order_no: this.order_no, truck_type: this.truck_type, order_remark: this.order_remark, aid: this.userInfo.id}).then(res => {
				
				if (res.code == 200) {
					if (res.result == 'success') {
						uni.showToast({
							title: res.msg,
							icon: "success",
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						});
					} else {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.result.timeStamp,
							nonceStr: res.result.nonceStr,
							package: res.result.package,
							signType: 'MD5',
							paySign: res.result.paySign,
							success: this.success,
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								uni.showToast(err.requestPayment);
							}
						});
					}
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error"
					});
					return;
				}
			})
		},
		success(){
			uni.showToast({
				title: '支付成功',
				icon: "success",
				complete() {
					uni.navigateBack({
						delta: 1
					})
				}
			});
		}
	}
};
</script>

<style lang="scss">
	
	.wrap{
		width:94%;
		padding-left: 3%;
		padding-right:3%;
		padding-bottom:30rpx;
		background-color: #f8f8f8;
	}
.u-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.u-row-between {
	justify-content: space-between;
}
.u-margin-top-20 {
	margin-top: 20rpx;
}
.va_m {
	vertical-align: middle;
}
.shadow_con,.shadow_con1 {
	padding: 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 0 15rpx #ddd;
	background-color: #fff;
}
.title {
	font-size: 32rpx;
	font-weight: bold;
}
.shadow_con > view {
	padding: 15rpx 0;
}
.shopimg {
	display: inline-block;
	width: 27%;
}
.shopinfo {
	display: inline-block;
	width: 68%;
	padding: 15rpx;
}
.price {
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #666;
}
.btn_con {
	width: 90%;
	height: 70rpx;
	line-height: 70rpx;
	font-size: 30rpx;
	border-radius: 35rpx;
	overflow: hidden;
	margin: 70rpx auto 20rpx;
	background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
	background-size: 100% 70rpx;
	color: #fff !important;
}
.item {
	display: flex;
	margin: 20rpx 0 0;
	.left {
		margin-right: 20rpx;
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}
	.content {
		width: 52%;
		.title {
			font-size: 28rpx;
			line-height: 50rpx;
		}
		.type {
			margin: 10rpx 0;
			font-size: 24rpx;
			color: $u-tips-color;
		}
		.delivery-time {
			color: #e5d001;
			font-size: 24rpx;
		}
	}
	.right {
		margin-left: 10rpx;
		padding-top: 20rpx;
		text-align: right;
		.decimal {
			font-size: 24rpx;
			margin-top: 4rpx;
		}
		.number {
			color: $u-tips-color;
			font-size: 24rpx;
		}
	}
}
.total {
	margin-top: 20rpx;
	text-align: right;
	font-size: 24rpx;
	.total-price {
		font-size: 32rpx;
	}
}
</style>
